
import {
  ProColumns,
  ProFormInstance,
  ProTable,
} from '@ant-design/pro-components';
import '@umijs/max';
import { Modal } from 'antd';
import React, { useEffect, useRef } from 'react';

// 定义组件的属性类型
export type Props = {
  // 表单中需要编辑的数据
  values: API.InterfaceInfo;
  //表格的列定义
  columns: ProColumns<API.InterfaceInfo>[];
  //当用户点击取消按钮时触发
  onCancel: () => void;
  //当用户提交表单时，将用户输入的数据作为参数传递给后台
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  // 模态框是否可见
  visible: boolean;
  //values不用传递
};
const UpdateModal: React.FC<Props> = (props) => {
  const { values, visible, columns, onCancel, onSubmit } = props;

  //使用React的useRef创建一个引用，以访问ProTable表单中的实例
  const formRef = useRef<ProFormInstance>();


  //使用React的useEffect钩子，在组件挂载时，调用ProTable的reload方法，重新加载数据
  useEffect(() => {
    if (formRef) {
      formRef.current?.setFieldsValue(values);
    }
  }, [visible]);

  // 返回模态框组件
  return (
    //创建一个Modal组件，通过visible属性控制其显示或隐藏，footer设置为null，把表单项的‘取消’和‘确认’按钮去掉
    <Modal visible={visible} footer={null} onCancel={ () => onCancel?.()}>
      {/* 创建一个ProTable组件，设定它为表单类型，将表单示例绑定到ref, 通过columns属性设置表格的列，提交表单时调用onSubmit函数 */}
      <ProTable
        columns={columns}
        type="form"
        formRef= {formRef}
        onSubmit={async (value) => {
          onSubmit?.(value);
        }}
      />
    </Modal>
  );
};
export default UpdateModal;
